import QtQuick 1.0
import com.nokia.symbian 1.0

Rectangle {
    id: ingredientListItem
    width: 300
    height: 60
    color: "gray"

    function changeIngredient(myIndex)
    {
        ingredientListModel.get(index).ingredientId = myIndex
    }

    function changeUnitType(myIndex)
    {
        ingredientListModel.get(index).unitTypeId = myIndex // Id == string ?? wrong here
    }

    function changeQuantity(myQuantity)
    {
        ingredientListModel.get(index).quantity = myQuantity
    }

    ListView.onAdd: {
        showupAnim.start()
    }

    NumberAnimation {
        id: showupAnim
        target: ingredientListItem;
        property: "opacity";
        from: 0;
        to: 1;
        duration: 400
    }

    Text {
        id: ingredientTextField
        x: 68
        y: 5
        text: ingredientSelectmodel[ingredientId].name
        font.family: "Hobo Std"
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 20
    }

    Rectangle {
        id: rectangle2
        y: 4
        width: 54
        height: 54
        color: "#ffffff"
        radius: 2
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.verticalCenter: parent.verticalCenter
        border.width: 2
        border.color: "#a9d7b4"

        Image {
            id: image1
            x: 12
            y: 6
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            source: "../Resource/celandine.png"
        }
    }

    Item {
        id: item1
        x: 187
        y: 6
        width: 160
        height: 48

        Rectangle {
            id: rectangle3
            x: 217
            y: 15
            width: 30
            height: 30
            color: "#ffffff"
            anchors.right: image2.left
            anchors.rightMargin: 6
            anchors.verticalCenter: parent.verticalCenter

            Text {
                id: unitTextField
                anchors.centerIn: parent
                text: unitTypeSelectmodel[unitTypeId]
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {

                    if(ingredientEditor.myUnitSelectDialog == null)
                    {
                        var component = Qt.createComponent("UnitSelectDialog.qml");
                        if (component.status == Component.Ready)
                        {
                            var unitDialog = component.createObject(ingredientEditor);
                            if( null == unitDialog)
                            {
                                console.debug("Create failed")
                                return;
                            }

                            //
                            unitDialog.anchors.centerIn = ingredientEditor
                            unitDialog.unitSelected.connect(changeUnitType)
                            ingredientEditor.myUnitSelectDialog = unitDialog;
                        }
                    }else{
                        // If we will hide the unit select dialog for some reason
                        // make it visible = true here
                        ingredientEditor.myUnitSelectDialog.visible = true
                    }
                }
            }
        }

        TextField {
            id: myTextField
            x: 143
            y: 14
            width: 68
            height: 32
            text: quantity
            anchors.right: rectangle3.left
            anchors.rightMargin: 6
            anchors.verticalCenter: parent.verticalCenter

            onTextChanged: {
                if(quantity == myTextField.text)
                    return;
                changeQuantity(myTextField.text)
            }
        }

        Image {
            id: image2
            x: 255
            y: 10
            width: 40
            height: 40
            anchors.right: parent.right
            anchors.rightMargin: 5
            anchors.verticalCenter: parent.verticalCenter
            clip: true
            smooth: true
            source: "../Resource/RoundDeleteButton.png"

            MouseArea {
                anchors.fill: parent
            }
        }
    }

    MouseArea {
        anchors.right: item1.left
        anchors.rightMargin: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0

        onPressAndHold: {
            var currentState = ingredientListItem.state;
            ingredientListItem.state = (currentState == "State1" ?  "State2" : "State2")
        }

        onClicked: {
            var currentState = ingredientListItem.state;
            if( "State1" == currentState )
            {
                // Show detailed information of ingredient
                if(ingredientEditor.myIngredientSelectDialog == null)
                {
                    var component = Qt.createComponent("IngredientSelectDialog.qml");
                    if (component.status == Component.Ready)
                    {
                        var ingredientDialog = component.createObject(ingredientEditor);
                        if( null == ingredientDialog)
                        {
                            console.debug("Create failed")
                            return;
                        }

                        //
                        ingredientDialog.anchors.centerIn = ingredientEditor
                        ingredientDialog.ingredientSelected.connect(changeIngredient)
                        ingredientEditor.myIngredientSelectDialog = ingredientDialog;
                    }
                }else{
                    // If we will hide the ingredient select dialog for some reason
                    // make it visible = true here
                    ingredientEditor.myIngredientSelectDialog.visible = true
                }
            }else if( "State2" == currentState )
            {
                ingredientListItem.state = "State1"
            }
        }
    }

    state: "State1"

    states: [
        State {
            name: "State1"

            PropertyChanges {
                target: item1
                x: 180
                y: 6
            }
        },
        State {
            name: "State2"

            PropertyChanges {
                target: item1
                x: 138
                y: 6
            }
        }
    ]

    transitions: [
        Transition {
            from: "State1"
            to: "State2"
            reversible: true

            PropertyAnimation {
                target: item1
                property: "x"
                duration: 100
            }
        }
    ]
}
